{namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
{namespace core=TYPO3\CMS\Core\ViewHelpers}

<f:layout name="main" />

<f:section name="headline">
	<h1>
		<f:translate key="extConfTemplate.headline" />
		{extension.key}
	</h1>
</f:section>

<f:section name="content">
	<div role="tabpanel">
		<ul class="nav nav-tabs" role="tablist">
			<f:for each="{configuration}" as="category" key="categoryNumber" iteration="iteration">
				<f:if condition="{category.name}">
					<li role="presentation" class="{f:if(condition:'{iteration.isFirst}', then:'active')}">
						<a class="text-capitalize" href="#category-{categoryNumber}" aria-controls="category-{categoryNumber}" role="tab" data-toggle="tab">
							{category.name}
						</a>
					</li>
				</f:if>
			</f:for>
		</ul>

		<f:form action="save" name="configurationform" id="configurationform">
			<div class="tab-content">
				<f:form.hidden name="extensionKey" value="{extension.key}" />
				<f:for each="{configuration}" as="category" key="categoryNumber" iteration="iteration">
					<f:if condition="{category.name}">
						<div role="tabpanel" class="tab-pane {f:if(condition:'{iteration.isFirst}', then:'active')}" id="category-{categoryNumber}">
							<f:for each="{category.subcategories}" as="subcategory">
								<div class="form-section">
									<f:if condition="{subcategory.label}">
										<f:then>
											<h2 class="h4 form-section-headline">{subcategory.label}</h2>
										</f:then>
										<f:else>
											<f:if condition="{category.subcategories->f:count()} > 1">
												<h3 class="h4 form-section-headline"><f:translate key="extConfTemplate.other" /></h3>
											</f:if>
										</f:else>
									</f:if>
									<f:for each="{subcategory.items}" as="item">
										<div class="form-group form-group-dashed">
											<label for="em-{item.name}">
												{item.labelHeadline}<br>
												<span class="text-monospace text-normal">
													{category.name}.{item.name}
													<f:if condition="{item.type} != 'user'">
														<f:alias map="{label: '{f:translate(key: \'extConfTemplate.type.{item.type}\')}'}">
															<f:if condition="{label}">
																({label})
															</f:if>
														</f:alias>
													</f:if>
												</span>
											</label>
											<f:if condition="{item.highlight}">
												<p class="text-danger">{item.highlight}</p>
											</f:if>
											<div class="form-control-wrap">
												<em:form.typoScriptConstants configuration="{item}" />
											</div>
											<f:if condition="{item.labelText}">
												<div class="help-block">{item.labelText -> f:format.nl2br()}</div>
											</f:if>
										</div>
									</f:for>
								</div>
							</f:for>
							<f:if condition="{category.highlightText}">
								{category.highlightText->f:format.raw()}
							</f:if>
						</div>
					</f:if>
				</f:for>
			</div>
			<f:comment>
				In order to allow form submit on pressing enter, a submit button is needed. See #66846
				The submit button is hidden as long as the save buttons are not part of the form yet.
			</f:comment>
			<f:form.submit name="mySubmit" value="Go" class="hidden" />
		</f:form>
	</div>
</f:section>
